<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../layuiadmin/layui/css/admin.css" media="all">
    <link rel="stylesheet" href="../../css/custom.css" media="all">
    <script src="../../js/echarts.min.5.2.js"></script>
    <title>Document</title>
</head>

<body>
    <div class="layui-row">
        <div class="layui-col-lg6 layui-col-md8 layui-col-sm9 layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-header">
                    <div class="my-header">垂直布局</div>
                    <div>
                        <p>标题有主标题和副标题</p>
                        <p>主标题和副标题的属性设置一样</p>
                        <p>标题能设置多个</p>
                        <a target="_blank" style="color: rebeccapurple;"
                            href="https://echarts.apache.org/zh/option.html#title.itemGap">更多设置详情：点击下面的主标题</a>
                        <p style="color: #b6b6b6;">
                            属性：text、target、textAlign、textVerticalAlign、triggerEvent、textStyle、subtext、subtextStyle、itemGap
                        </p>
                    </div>
                </div>
                <div class="layui-card-body">
                    <div id="myEchartsDiv" style="width: 100%; height: 200px;"></div>
                </div>
            </div>
        </div>
    </div>

    <script>
        var chartDom = document.getElementById('myEchartsDiv');
        var myChart = echarts.init(chartDom);

        /** 主要的就在这里了  @author weijun.wu */
        let customLegend = {
            title: [{
                text: '主 标 题', // 主标题
                link: 'https://echarts.apache.org/zh/option.html#title.itemGap',
                target: 'blank', // 点击主标题链接的跳转方式。'self' 当前窗口打开。'blank' 新窗口打开
                textAlign: 'left', // 整体（包括 text 和 subtext）的水平对齐。
                textVerticalAlign: 'top', // 整体（包括 text 和 subtext）的垂直对齐。
                triggerEvent: true, // 是否触发事件。默认是false。要开启事件的话，可以再外面使用'on'方法添加处理的方法，如下
                textStyle: {    // 设置主标题的详细样式
                    color: 'deeppink',
                    width: '50px',
                    fontSize: 24,
                    fontStyle: 'oblique',
                    fontWeight: 'bolder',
                    // fontFamily: 'Arial',
                    lineHeight: 56,
                    textBorderColor: '#34aea3',
                    textBorderWidth: 5,
                    textBorderDashOffset: 4
                },
                subtext: '副标题',
                subtextStyle: { // 副标题详细样式设置
                    color: 'blue',
                },
                itemGap: 30, // 主副标题之间的间距。
            }]
        }

        // 这是是添加一个点击事件，但这个点击事件是作用到全局的。要针对的设置为标题的点击事件的话，需要使用回调函数的参数。如下
        myChart.on('click', function (params) {
            console.log('params', params)
            if (params.componentType == 'title') {
                // alert('title event')
            }
        })

        /** 下面的代码基本都是不变的  @author weijun.wu */
        option = {
            tooltip: {　　//提示信息
                trigger: 'item',
                formatter: function (params) {
                    //设置提示信息的内容
                    return 'Content Category：' + params.name + '<br>City：' + params.seriesName + '<br>Total Handle Time(hr)：' + params.value;
                },
                backgroundColor: '#fff',
                borderRadius: 2,
                textStyle: {　　//设置提示信息的样式
                    color: '#000',
                    fontsize: 12
                }
            },
            grid: {
                left: '43%',
                right: '28%',
                top: '35%',
                bottom: '30%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                name: 'x轴',
                nameTextStyle: {
                    fontWeight: 'bold'
                },
                nameGap: 25,
                bottom: '15%',
                nameLocation: 'center',
                axisLabel: {
                    formatter: function (val) {
                        if (val > 1000) {
                            return val / 1000 + 'K';
                        } else {
                            return val;
                        }
                    }
                },
            },
            yAxis: {
                type: 'category',
                name: 'y轴',
                nameTextStyle: {
                    fontWeight: 'bold'
                },
                data: ['one', 'two', 'three']//[]
            },
            color: ['#2862A6', '#869CB1', '#A0D0AB', '#648A67', '#BEBA5F', '#F88450', '#FCB04E', '#B76353'],
            series: {
                name: '系列2',
                stack: '总量',
                type: 'bar',
                data: [42, 55, 26],
            },
        };

        Object.assign(option, customLegend)
        option && myChart.setOption(option);
    </script>

    <script src="../../js/tool.js"></script>
    <script>
        init()
    </script>
</body>

</html>